<template>
	<div class="cmt-container">
		<h3>发表评论</h3>
		<hr>
		<textarea placeholder="请输入您的评论(最多120字)" maxlength="120">
		</textarea>
		<mt-button type="primary" size="large">提交</mt-button>
			<div class="cmt-list">
				<div class="cmt-item">
					<div class="cmt-item-title">
						第1楼&nbsp;&nbsp;用户：匿名用户
					</div>
					<div class="cmt-item-body">
						床前明月光，疑是地上霜，举头望明月，低头思故乡。
					</div>
				</div>
				<div class="cmt-item">
					<div class="cmt-item-title">
						第1楼&nbsp;&nbsp;用户：匿名用户
					</div>
					<div class="cmt-item-body">
						床前明月光，疑是地上霜，举头望明月，低头思故乡。
					</div>
				</div>
			</div>
		<mt-button plain size="large">加载更多</mt-button>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	export default {
		data() {
			return {
				pageIndex:1 ,// 默认展示第一页数据
				comments:[]	// 所有的评论数据
			};
		},
		methods:{
			getComments(){
				// TODO
				this.$http
				.get("" + this.id + "?pageIndex=" + this.pageIndex)
				.then(result =>{
					if(result.body.status === 0){
						this.comments = result.body.message
					}else{
						Toast("获取评论失败！")
					}
				})
			}
		},
		props:["id"],
		created(){
			// this.getComments()
			console.log(this.id)
		}
	}
</script>

<style lang="less" scoped="scoped">
	.cmt-container{
		textarea{
			margin-bottom: 5px;
			margin: 0;
		}
		h3{
			font-size: 18px;
		}
		.cmt-list{
			margin: 4px;
			.cmt-item{
				
				.cmt-item-title{
					line-height: 28px;
					background-color: #ccc;
				}
				.cmt-item-body{
					text-indent: 2em;
				}
			}
		}
	}
</style>
